﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
     <title>贵美商城</title>
     
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

 <link rel="stylesheet"	type="text/css"	href="css/global.css"	/>
 <link rel="stylesheet"	type="text/css"	href="css/layout.css?id=7"	/>
 <script type="text/JavaScript" src="js/index.js"></script>
 <script type="text/javascript" language="javascript">
var timer = null;//定时器对象
var imgBasePath = 'images/';//图片基础路径
var imgArr = ['1.jpg','2.jpg','3.jpg','4.jpg'];//图片数组
var numArr = null;//用于显示序号的span数组
var index = 0;//当前下标
//初始化数据的方法
function ready(){
	advv.src = imgBasePath + imgArr[index];
	var s = '';
	for(var i = 0; i < imgArr.length; i++){
		if(i == index){
			s += "<span class='active' onmouseover='span_over(this)' onmouseout='startRotate()'>"+(i+1)+"</span>";
		} else {
			s += "<span class='wait' onmouseover='span_over(this)' onmouseout='startRotate()'>"+(i+1)+"</span>";
		}
	}
	n.innerHTML = s;
	numArr = n.getElementsByTagName("span");
	startRotate();
}
function showAdv(){
	//修改广告图片
	advv.src = imgBasePath + imgArr[index];
	//将所有的数字样式都修改为等待状态的样式
	for(var i=0;i<numArr.length;i++){
		numArr[i].className = "wait";
	}
	//将当前图片对应的数字修改为激活状态的样式
	numArr[index].className = "active";
}
function rotate(){
	index++;
	if(index >= imgArr.length){
		index = 0;
	}
	showAdv();
}
function startRotate(){
	timer = setInterval(rotate,2000);
}
function pauseRotate(){
	clearInterval(timer);
}
function span_over(s){
	pauseRotate();
	index = s.innerHTML - 1;
	showAdv();
}
</script>
</head>
<body onload="ready()"> 
	<div id="container">
		<iframe id="header" runat="server" src="header.jsp" width="980" height="136" frameborder="0" scrolling="no"></iframe>
		<div id="main">
    <div class="cat">
			<ul>
				<h1>家用电器</h1>
				<c:forEach items="${listOne }" var="one">
					<li><a href="findProductByProperty?property=${one }">${one }</a></li>
				</c:forEach>
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
			</ul>
			<ul>
				<h1>书籍</h1>
				<c:forEach items="${listTwo }" var="one">
					<li><a href="findProductByProperty?property=${one }">${one }</a></li>
				</c:forEach>	
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>				
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>				
			</ul>
			<ul>
				<h1>手机数码</h1>
				<c:forEach items="${listThree }" var="one">
					<li><a href="findProductByProperty?property=${one }">${one }</a></li>
				</c:forEach>	
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
		

			</ul>
			<ul>
				<h1>日用百货</h1>
				<c:forEach items="${listFour }" var="one">
					<li><a href="findProductByProperty?property=${one }">${one }</a></li>
				</c:forEach>	
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
				<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>			
		  </ul>      
    </div> <!--cat end-->
			<div id="content">
				<div class="content_top">
					<div>
			            <img src="images/ad-01.jpg" alt="9月新品新气象" id="div1" />
			            <img src="images/ad-02.jpg" alt="流行服饰魅力场" id="div2" />
			            <img src="images/ad-03.jpg" alt="食全食美" id="div3" />
			            <img src="images/ad-04.jpg" alt="outlets开张啦" id="div4" />
			        </div>
          	    <div id="adv">
          	    	<img id="advv" src="" width="524" height="190" />
    				<div id="n" class="n"></div>
         	    </div>
				</div> <!-- content_top end -->
      <div class="content_list">
        
		<c:forEach items="${hotList }" var="hot" varStatus="statu">
			<c:if test="${statu.count < 10 }">
				<dl>
		        	<dt><img style="width:114px;height:89px" src="${hot.picpath }" alt="alt" /></dt>
					<dd><a href="showProductInfo?productId=${hot.productId }">${hot.describe }</a></dd>
				</dl>
			</c:if>
		</c:forEach>
		</div><!-- content_list end -->
	</div><!-- content end -->
    <div class="sidebar">
         <div class="r1"></div>				
				 <div	class="r2">
				 <c:forEach items="${newList }" var="news" varStatus="statu">
					<c:if test="${statu.count < 5 }">
						<dl>
				        	<dt><img style="width:53px;height:46px" src="${news.picpath }" alt="alt" /></dt>
							<dd><a href="showProductInfo?productId=${news.productId }">${news.describe }</a></dd>
						</dl>
					</c:if>
				</c:forEach>
			</div> <!--r2	end-->	    
					<div id="tab">
					  <div id="tabtitle1" onmouseover="switchMe(1);"></div>
					  <div id="tabtitle2" onmouseover="switchMe(2);"></div>		
					  <div id="tabbody">
					  	<img src="images/tabbody2.gif" alt="手机充值" />
					  </div>											  
					</div>
				</div> <!--sidebar end-->				
		 </div>	<!--main end-->
     <iframe id="footer" runat="server" src="footer.jsp" width="980" height="150" frameborder="0" scrolling="no"></iframe>
	
	</div><!--container	end-->		
</body>
</html>